<!DOCTYPE HTML>
<html>
   
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Gradient ilustrator</title>
        <style>

            html {
                background-color:#222;

            }
            body {
                width:800px;
                background-color:#222;
                margin:15% auto;
            }

            h1 {
                font-family:sans-serif;
                font-weight:400;
                font-size:160px;
                text-shadow:0 1px 0 #333, -2px 12px 10px rgba(0, 0, 0, 0.48), -2px 22px 10px rgba(0, 0, 0, 0.28);
                padding:0 10px;
                margin:0;
                color:#030303;
                position:relative;
                float:left;
                -webkit-transition:0.8s;
                -o-transition:0.8s;
                transition:0.8s;
   z-index: 2;
            }
            h1:before {
                content:"";
                position:absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;
                background: -moz-linear-gradient(top, rgba(34, 34, 34, 0.57) 0%, rgba(34, 34, 34, 0.57) 53%, rgba(34, 34, 34, 0) 58%, rgba(34, 34, 34, 0) 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(34, 34, 34, 0.57)), color-stop(53%, rgba(34, 34, 34, 0.57)), color-stop(58%, rgba(34, 34, 34, 0)), color-stop(100%, rgba(34, 34, 34, 0)));
                background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0.57) 0%, rgba(34, 34, 34, 0.57) 53%, rgba(34, 34, 34, 0) 58%, rgba(34, 34, 34, 0) 100%);
                background: -o-linear-gradient(top, rgba(34, 34, 34, 0.57) 0%, rgba(34, 34, 34, 0.57) 53%, rgba(34, 34, 34, 0) 58%, rgba(34, 34, 34, 0) 100%);
                background: -ms-linear-gradient(top, rgba(34, 34, 34, 0.57) 0%, rgba(34, 34, 34, 0.57) 53%, rgba(34, 34, 34, 0) 58%, rgba(34, 34, 34, 0) 100%);
                background: linear-gradient(to bottom, rgba(34, 34, 34, 0.57) 0%, rgba(34, 34, 34, 0.57) 53%, rgba(34, 34, 34, 0) 58%, rgba(34, 34, 34, 0) 100%);
            }
            h1:after {
                content:"URANG-KURAI.BLOGSPOT.COM";
                position:absolute;
                bottom:0;
                width:100%;
                left:55px;
                font-size:12px;
                font-family:arial, sans serif;
                letter-spacing:24px;
                font-weight:600;
                text-shadow:0 1px 0 #333;
            }
            h1 span:before {
                content:attr(rel);
                position:absolute;
                margin:0;
                right:0;
                top:0;
                padding:0;
                color:#070707;
                text-shadow:1px 1px 1px #222;
            }
            h1:hover {
                text-shadow:-221px 0 10px #222, 321px 0 10px #222, 0 350px 10px #222, 0 10px 10px #111;
            }
       
        </style>
    </head>
   
    <body>
       
                <h1>GRADIENT <span rel="GRADIENT"></span>  </h1>

</body>
</html>
<!--Copyright © urang-kurai -->